<template>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside class="aside" :width="asideWidth" >
        <!-- 侧边栏标题 -->
        <div class="sidebar-title">OA <span v-show="!isCollapse">管理系统</span>
          </div>
  
        <!-- 菜单 -->
        <el-menu
          active-text-color="#ffd04b"
          background-color="#2C3E50"
          class="el-menu-vertical-demo"
          default-active="1"         
          text-color="#fff"
          :collapse="isCollapse"
          :collapse-transition="false"
        >
        <el-menu-item index="1">
            <el-icon><HomeFilled /></el-icon>
            <span>首页</span>
          </el-menu-item>

          <el-sub-menu index="2">
            <template #title>
                <el-icon><Checked /></el-icon>
                <span>考勤管理</span>
            </template>
            <el-menu-item index="2-1">
                <el-icon><UserFilled /></el-icon>
                <span>个人考勤</span>
            </el-menu-item>
            <el-menu-item index="2-2">
                <el-icon><User /></el-icon>
                <span>下属考勤</span>
                </el-menu-item>
        
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
                <el-icon><BellFilled /></el-icon>
                <span>通知管理</span>
            </template>
            <el-menu-item index="3-1">
                <el-icon><CirclePlusFilled /></el-icon>
                <span>发布通知</span>
            </el-menu-item>
            <el-menu-item index="3-2">
                <el-icon><List /></el-icon>
                <span>通知列表</span>
                </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
                <el-icon><UserFilled /></el-icon>
                <span>员工管理</span>
            </template>
            <el-menu-item index="4-1">
                <el-icon><CirclePlusFilled /></el-icon>
                <span>新增员工</span>
            </el-menu-item>
            <el-menu-item index="4-2">
                <el-icon><List /></el-icon>
                <span>员工列表</span>
                </el-menu-item>
          </el-sub-menu>
          
        </el-menu>
      </el-aside>
  
      <!-- 主体内容 -->
      <el-container>
        <el-header class="el-header">
          <el-button v-show="isCollapse" @click="onCollapse" :icon="Expand" circle />
          <el-button v-show="!isCollapse" @click="onCollapse" :icon="Fold" circle />
        </el-header>
          
        <el-main class="el-main">
          Main Content
        </el-main>
      </el-container>
    </el-container>
  </template>
<script setup>
import { ref,computed } from 'vue';
import {Expand,Fold} from '@element-plus/icons-vue'
let isCollapse = ref(true); // 控制侧边栏的展开和收起状态
let asideWidth = computed(() => {
  if (isCollapse.value) {
    return '64px'; // 收起时的宽度
  }else{
    return '250px'; // 展开时的宽度 
  }

}) // 侧边栏的宽度

const onCollapse = () => {
  isCollapse.value = !isCollapse.value; // 切换状态 
}

</script>
  
  <style scoped>
  /* 统一容器布局，设置整个页面的高度为100vh */
  .el-container {
    height: 100vh;
  }
  
  /* 侧边栏样式 */
  .aside {
    background: #2C3E50; /* 深色背景，提升视觉效果 */
    color: #ECF0F1; /* 浅色字体 */
    box-shadow: 2px 0 10px rgba(0, 21, 41, 0.15); /* 增加阴影深度 */
    border-right: 1px solid #BDC3C7; /* 增加边界分隔 */
    display: flex;
    flex-direction: column;
    padding-top: 0px;
    padding-left: 0px; /* 左侧内边距 */
    overflow-y: auto; /* 确保侧边栏内容滚动 */
  }
  
  /* 侧边栏标题样式 */
  .sidebar-title {
    font-size: 20px; /* 设置字体大小 */
    color: #ECF0F1; /* 设置字体颜色 */
    font-weight: bold; /* 字体加粗 */
    padding-left: 20px; /* 增加左侧内边距 */
    background-color: #1A2531; /* 设置标题背景色，更深的背景 */
    width: 100%; /* 确保标题与侧边栏宽度一致 */
    padding: 12px 20px; /* 增加上下内边距，让标题更有层次 */
    border-radius: 4px 4px 0 0; /* 圆角，保持一致性 */
    margin-bottom: 0; /* 去掉标题与菜单项之间的间隙 */
  }
  
  /* 菜单项样式 */
  .el-menu-item {
    padding: 12px 20px; /* 增加内边距 */
    color: #ECF0F1;
    text-decoration: none;
    border-radius: 4px; /* 圆角 */
    margin-bottom: 5px; /* 菜单项之间的间隔 */
    transition: background-color 0.3s, color 0.3s; /* 平滑过渡效果 */
    background-color: #2C3E50; /* 保持菜单项背景色一致 */
  }
  
  /* 鼠标悬停时的样式 */
  .el-menu-item:hover {
    background-color: #409EFF; /* 鼠标悬停时背景变为蓝色 */
    color: white; /* 鼠标悬停时字体颜色变为白色 */
  }
  
  /* 菜单禁用项 */
  .el-menu-item.is-disabled {
    color: #BDC3C7; /* 禁用时字体颜色变为灰色 */
    background-color: transparent; /* 禁用时背景透明 */
  }
  
  /* 主体容器样式 */
  .el-header {
    background: #409EFF;
    color: white;
    padding-left: 0px; /* 左侧内边距 */
    height: 56px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e8e8e8;
    z-index: 1;
  }
  
  /* 主体内容区域 */
  .el-main {
    padding: 20px;
    background: #f4f6f9; /* 修改为更明亮的背景色 */
    overflow-y: auto;
  }
  
  /* 优化容器的排列方式，确保响应式布局 */
  .el-container > .el-container {
    flex-direction: column;
    overflow: hidden; /* 防止内部元素溢出 */
  }
  
  /* 响应式调整：小屏幕上自动隐藏侧边栏并使主体内容占满 */
  @media (max-width: 768px) {
    .el-aside {
      width: 100px; /* 缩小侧边栏宽度 */
    }
  
    .el-main {
      padding: 10px; /* 减小主内容区域的内边距 */
    }
  }
  </style>
  